<template>
  <infinite-loading class="load-more w-flex-center" @infinite="loadMore">
    <div slot="spinner">Loading...</div>
    <div slot="no-more">我是有底线的</div>
    <div slot="no-results">我是有底线的</div>
  </infinite-loading>
</template>

<script lang="ts">
import InfiniteLoading from "vue-infinite-loading";
import { Component, Vue, Prop, Watch } from "vue-property-decorator";
import { LoadType } from "@/models/YBListLoad";

@Component({
  components: {
    InfiniteLoading
  }
})
export default class ComLoadMore extends Vue {
  @Prop({ default: LoadType.loaded }) loadType!: LoadType;

  $state: any;

  @Watch("loadType")
  loadTypeChange(val: LoadType) {
    switch (this.loadType) {
      case LoadType.loading:
        break;
      case LoadType.loaded:
        this.$state.loaded();
        break;
      case LoadType.finish:
        this.$state.complete();
        break;
    }
  }

  loadMore($state: any) {
    this.$state = $state;
    this.$emit("loadMore");
  }
}
</script>

<style lang="scss" scoped>
.load-more {
  height: 60px;
  font-size: 16px;
  font-family: PingFangSC-Regular;
  color: rgba(159, 163, 176, 1);
}
</style>

